<!--
 * @Author: zhangyun
 * @Date: 2021-04-20 16:40:10
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-28 10:34:48
 * @Desc: 
-->
<template>
  <a
    class="inline-block text-gray-500 mr-4 text-l cursor-default py-1 font-bold mt-1 border-b-4 border-transparent hover:text-gray-700"
    :class="[currentRoute === item.page && 'border-b-4 border-transparent border-blue-600']"
    @click="go(item.page)"
    v-for="item of data"
    :key="item.id"
    >{{ item.name }}</a
  >
</template>

<script lang="ts">
import { defineComponent, watch, ref, PropType } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'Links',
  props: {
    data: {
      type: Array as PropType<Array<any>>,
      required: true,
    },
  },
  setup() {
    const router = useRouter()
    const currentRoute = ref<any>('home')
    watch(
      () => router.currentRoute,
      (route, prevRoute) => {
        currentRoute.value = route.value.name
      },
      {
        deep: true,
      }
    )
    function go(page: string): void {
      console.log(page)
      router.push({ name: page, params: {} })
    }
    return { go, currentRoute }
  },
})
</script>

<style></style>
